<template>
  <div style="min-height:600px;">
    <el-col :span="24" class="toolbar">
      <div class='container'>
        <div id="tab_content">
          <div class="content">
            <div style="border-bottom:1px solid lightgrey;">
              <el-form :inline="true" style="margin:15px auto;">
                <el-form-item>
                  <city style="margin-left:20px;" ref="citySel"></city>
                </el-form-item>
                <el-form-item>
                  <span style="margin-left:20px;">目的地：</span>
                  <el-input v-model="keyWords" size="small" placeholder="请输入目的地、主题、关键词" style="width:250px;"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="small" @click="doSearch" style="line-height:14px;width:90px;margin-left:30px;">搜索</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div style="padding-top:15px;padding-left:20px;">
              <span>国内热门：</span>
            </div>
          </div>
        </div>
        <div>
          <ul id='tabnav'>
            <li :class="{active: tab_index==0, normal: tab_index !=0}" @click="tab_click(0)">
              <span>跟团游</span>
            </li>
            <li :class="{active: tab_index==1, normal: tab_index !=1}" @click="tab_click(1)">
              <span>自由行</span>
            </li>
            <li :class="{active: tab_index==2, normal: tab_index !=2}" @click="tab_click(2)" style="border-bottom: 1px solid lightgrey;">
              <span class="nor_font">签证游</span>
            </li>
          </ul>
        </div>
      </div>
    </el-col>
  </div>
</template>

 <script type="text/ecmascript-6">
  import {resetBreads} from '../../tuyou/common/js/util.js'
  import city from '../base/cityPlugin/citySelect'
  export default {
    data () {
      return {
        tab_index: 0,
        dptCity: '',
        keyWords: '' // 关键词
      }
    },
    methods: {
      tab_click (index) {
        this.tab_index = index
      },
      doSearch () {
        let city = this.$refs.citySel.input
        let bread = ''
        if (this.tab_index === 0) {
          bread = '跟团游'
        } else if (this.tab_index === 1) {
          bread = '自由行'
        } else if (this.tab_index === 2) {
          bread = '签证游'
        }
        // let params = {}
        // if (city) {
        //   params.dptCity = city
        // }
        // if (this.keyWords) {
        //   params.keyWords = this.keyWords
        // }
        // params.type = this.tab_index
        // 更新面包屑
        let breads = []
        if (sessionStorage.getItem('breads')) {
          breads = sessionStorage.getItem('breads').split(',')
          breads.push(bread)
        }
        this.$store.dispatch('updateBreads', breads)
        this.$store.dispatch('updatelocationpath', '/productSearchResult')
        this.$router.push({path: '/productSearchResult'})
        sessionStorage.setItem('breads', breads)
        // 转向产品搜索结果页
        // this.$router.push({path: 'productSearchResult', query: params})
        let url = '/productSearchResult/' + city + '/' + (this.keyWords === '' ? 'ept' : this.keyWords) + '/' + this.tab_index
        this.$router.push(url)
      }
    },
    created () {
      // 前进后退处理
      resetBreads(this)
    },
    components: {
      city
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    #tabnav li {
      border-top: 1px solid lightgrey;
      border-left: 1px solid lightgrey;
      border-right: 1px solid lightgrey;
      height: 60px;
      line-height: 60px;
      list-style: none;
      text-align: center;
      width: 200px;
      cursor pointer;
      font-weight bold;
      font-color lightgrey;
    }

    #tabnav li.active {
      border-right: 1px solid white;
      border-left: 2px solid #20a0ff;
      background: white;
    }

    #tabnav li.normal {
      border-right: 1px solid white;
      background: #9cb0c5;
      color white;
    }

    #tab_content {
      float: right;
      margin-right 40px;
      width: 897px;
      background: white;
      height: 182px;
      // overflow: hidden;
      border-top: 1px solid lightgrey;
      border-right: 1px solid lightgrey;
      border-bottom: 1px solid lightgrey;
    }

    #tab_content .content {
      padding: 15px;
      -moz-border-radius: 5px;
      height: 300px;
    }
</style>
